<template>
  <div class="flv-video">
    <video id="videoElement" controls></video>
  </div>
</template>
<script>
export default {
  name: 'FlvVideo',
  props: {
    videoUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.initFlv()
  },
  methods: {
    initFlv() {
      /* eslint-disable */
      var flvPlayer = null
      var oldTime = 0
      var videoElement = null
      var isSeek = false

      if (flvjs.isSupported()) {
        videoElement = document.getElementById('videoElement')
        flvPlayer = flvjs.createPlayer(
          {
            type: 'mp4',
            cors: true,
            url: this.videoUrl
          })
        flvPlayer.attachMediaElement(videoElement)
        flvPlayer.load()
        videoElement.addEventListener('timeupdate', function () {
          console.log('this.isseek:' + isSeek)
          if (isSeek) {

          } else {
            console.log('timeupdate:' + flvPlayer.currentTime)
            if (flvPlayer.currentTime - oldTime >= 2) {
              flvPlayer.currentTime = Math.min(0, Math.abs(oldTime - 10))
              flvPlayer.pause()
              videoElement.pause()
            } else {
              oldTime = flvPlayer.currentTime
            }
          }
        }.bind(this))

        videoElement.addEventListener('seeking', function () {
          isSeek = true
          flvPlayer.pause()
          videoElement.pause()
          if (flvPlayer.currentTime > oldTime) {
            flvPlayer.currentTime = oldTime
          }
          setTimeout(() => {
            isSeek = false
          }, 2000)
        }.bind(this))
        this.player = flvPlayer
        //  flvPlayer.play()
      }
    },
    play() {
      this.player.play()
    },
    pause() {
      this.player.pause()
    }
  }
}
</script>